<template>
    <div id="App">
        <div class="resetPw_container">
            <!--<img src="../assets/logo1.png" alt="">-->
            <div class="resetPw_box">
                <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div> -->
                <span class="title">重置密码</span>
                <el-form ref="" :model="ResetPwForm" :rules="ResetPwFormRules" label-width="0px" class="resetPw_form">
                    <!--用户名-->
                    <el-form-item label="" prop="password">
                        <el-input v-model="ResetPwForm.username" type="password" placeholder="输入新密码" prefix-icon="">
                        </el-input>
                    </el-form-item>
                    <!--身份证号-->
                    <el-form-item label="" prop="repassword">
                        <el-input v-model="ResetPwForm.idcardNum" type="password" placeholder="再次输入新密码" prefix-icon="">
                        </el-input>
                    </el-form-item>
                    <!-- <el-button type="text" style="display:flex;">忘记密码？</el-button> -->
                    <el-form-item class="btn2">
                        <el-button type="primary" @click="relogin">确认</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 登录表单的数据绑定对象
      ResetPwForm: {
        password: '',
        repassword: ''
      },
      // 登录表单的验证规则对象
      ResetPwFormRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度非法！', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度非法！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    relogin () {
      // 验证两次密码是否输入一致
      if (this.ResetPwForm.username != this.ResetPwForm.idcardNum) {
        this.$msgbox.alert('两次密码不一致！')
        // location.reload();
        // this.$router.go(0);
      } else {
        this.$msgbox.alert('重置成功，请返回登录!')
        this.$router.push('/Login')
      }
    }
  }
}

</script>

<style scoped>
.resetPw_container {
    height: 100%;
    background-color: #eee;
}

.resetPw_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.title {
    color: #409EFF;
    display: flex;
    margin-top: 30px;
    margin-left: 20px;
    font-size: 24px;
}

.resetPw_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    /* margin-top: 20px; */
}

.btn1 {
    display: flex;
    justify-content: flex-end;
}

.btn2 {
    display: flex;
    justify-content: center;
}
</style>
